<template>
  <q-item>
    <q-item-section side>{{ tLabel }}</q-item-section>
    <q-item-section class="text-right">{{
      mapPose !== {} ? mapPose.name : $t(lang + "无点位")
    }}</q-item-section>
  </q-item>
  <q-item v-if="mapName && mapPose !== {}">
    <q-item-section side>{{ $t(lang + "地图名称") }}</q-item-section>
    <q-item-section class="text-right">{{ mapData.name }}</q-item-section>
  </q-item>
  <q-item v-if="area && mapPose !== {} && mapPose.area">
    <q-item-section side>{{ $t(lang + "点位区域") }}</q-item-section>
    <q-item-section class="text-right">{{ mapPose.area }}</q-item-section>
  </q-item>
</template>

<script setup>
import { useAPIStore } from "stores/api/index.js";
import { api } from "boot/axios.js";
import { useI18n } from "vue-i18n";
import { ref, onUnmounted, watch, computed, onMounted } from "vue";

const t = useI18n().t; // 语言包
const lang = "devicePage.MapPoseInfo."; // 获取语言是的简写，当前路由名加上 当前文件名
const tLabel = ref(""); // 当props.label没传值时,取默认值

const props = defineProps({
  label: { type: String, default: "" },
  poseId: String,
  center: { type: Boolean, default: false },
  update: { type: Boolean, default: false },
  mapName: { type: Boolean, default: false },
  area: { type: Boolean, default: false },
});
const mapPose = ref({});
const mapData = ref({});
const mapId = computed(() => mapPose.value.mapID);
const timer =
  props.update && props.poseId ? setInterval(getMapPose, 1000) : null;

onMounted(() => {
  tLabel.value = props.label || t(lang + "点位区域");
});
onUnmounted(() => {
  clearInterval(timer);
});

watch(mapId, (value) => {
  if (!props.mapName) return;
  if (props.center) {
    api.get(useAPIStore().mapUrl + "map/id/simple/" + value).then((rs) => {
      mapData.value = rs.data;
    });
  } else {
    api.get(useAPIStore().amrMapUrl + "id/" + value).then((rs) => {
      mapData.value = rs.data;
    });
  }
});

function getMapPose() {
  if (["", null].includes(props.poseId)) return;
  if (props.center) {
    api.get(useAPIStore().mapUrl + "mapPose/id/" + props.poseId).then((rs) => {
      mapPose.value = rs.data;
    });
  } else {
    api.get(useAPIStore().amrMapUrl + "pose/id/" + props.poseId).then((rs) => {
      mapPose.value = rs.data;
    });
  }
}
</script>
